<template>
	<view class="page" style="">
		<nav-bar @selectSewlingLine="changeSewingLine" />
		<view class="content">
			<view class="left-skuInfo">
				<view class="l-header">
					<view class="h-title">
						<view class="title-icon"></view>
						<text style="color: #333;font-size: 1.2rem">{{ $t('pages.exchangeLine.currentProduct') }}</text>
					</view>
					<view class="info" style="height: 30%;">
						<image :src="imgurl ? imgurl : '../../static/img/defaultImg.png'"></image>
					</view>
					<view class="info">{{ $t('pages.quality.styleNo') }}：<text>{{ productionInfo.styleNo }}</text>
					</view>
					<view class="info">{{ $t('pages.quality.styleName') }}：<text>{{ productionInfo.styleName }}</text>
					</view>
					<view class="info">{{ $t('pages.quality.productionNo') }}：<text>{{ productionInfo.billNo }}</text></view>
					<view class="info">{{ $t('pages.quality.customer') }}：<text>{{ productionInfo.customerName }}</text>
					</view>
					<view class="info">{{ $t('pages.exchangeLine.deliveryDate') }}：<text>{{ productionInfo.deliverTime }}</text></view>
					<view class="info">{{ $t('pages.quality.pass') }}/{{ $t('pages.quality.order') }}：<text>{{ qualityRate.toFixed(0) }}%</text></view>
					<view class="info">
						<u-line-progress :percentage="qualityRate" activeColor="#3EAAF7" :showText="false"></u-line-progress>
					</view>
				</view>
			</view>
			<view v-if="rightNoData">{{ $t('pages.quality.tipsData') }}</view>
			<view v-else class="right">
				<view class="r-header">
					<view class="h-item mg-r-2">
						<view class="h-title">{{ $t('pages.exchangeLine.orderNumber') }}</view>
						<view class="font-12">{{ productionInfo.orderNum || 0 }}</view>
					</view>
					<view class="h-item mg-r-2">
						<view class="h-title">{{ $t('pages.exchangeLine.feedingNumber') }}</view>
						<view class="font-12">{{ productionInfo.feedNum || 0 }}</view>
					</view>
					<view class="h-item mg-r-2">
						<view class="h-title">{{ $t('pages.exchangeLine.passNumber') }}</view>
						<view class="font-12">{{ productionInfo.qualifeidNum || 0 }}</view>
					</view>
					<view class="h-item">
						<view class="h-title">{{ $t('pages.exchangeLine.scarpNumber') }}</view>
						<view class="font-12">{{ productionInfo.discardedNum || 0 }}</view>
					</view>
				</view>
				<view class="r-content">
					<scroll-view scroll-y="true" class="scroll-Y">
					<view class="sku-content">
						<view class="sku-item" v-for="item in productionDetailList" :key="item.id">
							<view class="color">{{ item.color }}-{{ item.size }}</view>
							<view class="progress">
								<view class="left flex-col">
									<view>{{ $t('pages.exchangeLine.feeding') }}：<text>{{ item.feedNum }}</text></view>
									<view>{{ $t('pages.quality.pass') }}：<text>{{ item.qualifiedNum }}</text></view>
								</view>
								<view class="right flex-col">
									<view style="display: flex;justify-content: center;font-size: 1.25rem;">{{ item.rate }}%</view>
									<view><u-line-progress :percentage="item.rate" :activeColor="item.rate < 100 ? '#FB602D' : '#3E8FF7'" :showText="false"></u-line-progress></view>
								</view>
							</view>
						</view>
					</view>
					</scroll-view>
				</view>
			</view>
			<view class="fixed-button">
				<view class="back">
					<u-button @click="backRouter">{{ $t('common.return') }}</u-button>
				</view>
				<view class="submit">
					<u-button type="primary" @click="changeStyle">{{ $t('pages.exchangeLine.exchangeStyle') }}</u-button>
				</view>
			</view>
			<!-- 提交提示 -->
			<u-modal :show="confirmShow" :confirmText="$t('common.determine')" :cancelText="$t('common.cancel')"
				:showCancelButton="true" @confirm="confrimHandle" @cancel="confirmShow = false" content="确认提交吗？">
			</u-modal>
		</view>
		<!-- 换款弹出窗 -->
		<styleSelect ref="styleSelect" @selectStyle="getNewStyleInfo" />
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	import navBar from "@/components/nav/index.vue"
	import styleSelect from "@/components/production/styleSelect.vue"
	import { isNumber } from "@/utils/verify.js"
	import { getCurrentProduction } from "@/api/feeding.js"
	import { saveChange } from "@/api/exchangeLine.js"
	export default {
		components: {
			navBar,
			styleSelect
		},
		data() {
			return {
				notProductionId: '',
				imgurl: '',
				confirmShow: false,
				allowClick: false,
				productionId: '',
				sewingId: '',
				qualityRate: 0,
				currentStyleIndex: 0,
				tableData: [],
				// 生产单信息
				productionInfo: {
					billNo: '',
					styleNo: '',
					styleName: '',
					customerName: '',
				},
				productionDetailList: [],
				rightNoData: true,
				allowSave: false,
				scrollTop: 0,
				value: 0,
				queryParams: {
					sewingId: this.sewingId,
					productionId: '',
					inspectionId: ''
				},
				indexList: []
			};
		},
		onLoad(option) {
			this.queryParams.sewingId = option.sewingId
			plus.screen.lockOrientation('landscape-primary') //锁定横屏
		},
		mounted() {
			this.getProductionInfo()
		},
		methods: {
			updateNum() {
				// 修改sku投料量
			},
			confrimHandle() {
				this.saveProductionInfo()
				this.confirmShow = false
			},
			openConfirmModal() {
				this.saveProductionInfo()
			},
			TypeInput(e, type) {
				// 只能输入数字的验证;
				const inputType = /[^\d]/g //想限制什么类型在这里换换正则就可以了
				this.$nextTick(function() {
					if (type === 'qualifiedNum') {
						this.currentProductionInfo.qualifiedNum = e.replace(inputType, '');
					} else if (type === 'unqualifiedNum') {
						this.currentProductionInfo.unqualifiedNum = e.replace(inputType, '');
					} else {
						this.currentProductionInfo.discardedNum = e.replace(inputType, '');
					}

				})
			},
			updateNumber(e, index, type) {
				const inputType = /[^\d]/g //想限制什么类型在这里换换正则就可以了
				if (type === 'processList') {
					this.productionInfo.processList[index].questionNum = e.replace(inputType, '');
				} else {
					this.productionInfo.defectiveSpotList[index].questionNum = e.replace(inputType, '');
				}
			},
			// 获取产量登记信息
			getProductionInfo() {
				getCurrentProduction(this.queryParams).then(res => {
					if (res.code !== 0) return uni.$u.toast(res.msg)
					this.productionInfo = res.data
					this.notProductionId = this.productionInfo.productionDetailList[0]?.orderId
					if (this.productionInfo.images && this.productionInfo.images.length > 5 ) {
						this.imgurl = JSON.parse(this.productionInfo.images)[0].src
					}else {
						this.imgurl = ''
					}
					if (this.productionInfo.qualifeidNum && this.productionInfo.orderNum) {
						this.qualityRate = (this.productionInfo.qualifeidNum / this.productionInfo.orderNum)
						this.qualityRate = Number(this.qualityRate.toFixed(2)) * 100
					}else {
						this.qualityRate = 0
					}
					if (res.data.productionDetailList && res.data.productionDetailList.length > 0) {
						this.rightNoData = false
						res.data.productionDetailList.map(item => {
							// 计算合格率
							item.rate = this.calculationRate(item.qualifiedNum, item.feedNum)
						})
					} else {
						this.rightNoData = true
						this.qualityRate = 0
					}
					this.productionDetailList = res.data.productionDetailList
				})
			},
			// 计算合格率
			calculationRate(qualifiedNum, feedNum) {
				let rate = 0
				if (qualifiedNum && feedNum) {
					rate = qualifiedNum / feedNum
					rate = Number((rate * 100).toFixed(2))
				} else {
					rate = 0
				}
				return rate
			},
			//保存
			saveProductionInfo() {
				this.backRouter()
			},
			backRouter() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 换款打开款式选择弹窗
			changeStyle() {
				this.$nextTick(() => {
					this.$refs.styleSelect.queryParams.changeStyle= '1'
					this.$refs.styleSelect.queryParams.notProductionId = this.notProductionId
					this.$refs.styleSelect.openDialog(this.queryParams.sewingId, '/iot-mobile-api/iotSewingChange/iotsewingchangerecord/getChangeProductionPage')
				})
			},
			// 保存换款
			saveChangeStyle(params) {
				saveChange(params).then(res => {
					if (res.code !== 0){
						if (res.code !== 0) {
							// #ifdef APP-PLUS
							plus.nativeUI.toast(`<p style=\"font-size: 28px\">${res.msg}</p>`,{
								type: "richtext",
								duration: "long",
								verticalAlign: "middle"
							}
							);
							return
							// #endif
							return uni.$u.toast(res.msg)
						}
					}
					this.notProductionId  = params.productionDto.id
					// uni.$u.toast(this.$t('common.success'))
					// #ifdef APP-PLUS
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('common.success')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					}
					);
					// #endif
					setTimeout(() => {
						this.getProductionInfo()
					}, 1500)
				})
			},
			getNewStyleInfo(e) {
				this.queryParams.productionId = e.id
				// this.notProductionId = e.id
				let params = {}
				params.sewingId = this.queryParams.sewingId
				params.productionDto = e
				this.saveChangeStyle(params)
			},
			// 切换缝制线
			changeSewingLine(e) {
				this.queryParams.sewingId = e
				this.queryParams.productionId = ''
				this.getProductionInfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>
